<template>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>您当前所在位置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>会员卡管理</el-breadcrumb-item>
        <el-breadcrumb-item>交易记录</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <div class="total_box mb10">
           <p>· 会员充值金额: {{statistics.AllTopUp}} ( 优惠:{{statistics.AllDiscounts}} 实收:{{statistics.AllOfficialReceipts}} )</p>
           <p>· 会员消费金额:{{statistics.AllConsume}}</p>
        </div>
        <el-row class="mb10">
          <el-col :span="24">
             <el-select v-model="queryInfo.shop_id" placeholder="选择门店" @change="this.getCardInfo" clearable>
                <el-option
                  v-for="item in shopOptions"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </el-option>
             </el-select>
             <el-select v-model="queryInfo.cashier_id" placeholder="选择收银员" @change="this.getCardInfo" clearable>
                <el-option
                  v-for="item in cashierOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
             </el-select>
             <el-select v-model="queryInfo.type" placeholder="选择卡类型" @change="this.getCardInfo" clearable>
                <el-option
                  v-for="item in TypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
             </el-select>
             <el-select v-model="queryInfo.note" placeholder="操作类型" @change="this.getCardInfo" clearable>
                <el-option
                  v-for="item in operationOptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                  :disabled="item.disabled">
                </el-option>
             </el-select>
             <el-date-picker
              v-model="seletTime"
              type="daterange"
              align="right"
              unlink-panels
              :default-time="['00:00:00', '23:59:59']"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              clearable
              @change="timeChange">
            </el-date-picker>
             <el-select v-model="queryInfo.id" placeholder="请选择" clearable>
                <el-option
                  v-for="item in resourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
             </el-select>
             <el-input placeholder="请输入内容" v-model="queryInfo.keyword" clearable >
                <el-button slot="append" @click="onsearch" icon="el-icon-search"></el-button>
              </el-input>
              <el-button type="primary" @click="excelExport">导出EXCEL</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" height="580" border  style="width: 100%">
            <el-table-column prop="id" label="交易单号"></el-table-column>
            <el-table-column prop="card_number" label="会员卡号" ></el-table-column>
            <el-table-column prop="phone" label="会员手机号" width="100"></el-table-column>
            <el-table-column prop="title" label="门店" width="100"></el-table-column>
            <el-table-column prop="cashier" label="收银员" width="100"></el-table-column>
            <el-table-column prop="order_no" label="来源单号" width="100"></el-table-column>
            <el-table-column label="交易类型" width="100">
              <template slot-scope="scope">
                {{scope.row.type == 1? '充值订单': '消费订单'}}
              </template>
            </el-table-column>
            <el-table-column prop="note" label="交易说明" width="100"></el-table-column>
            <el-table-column prop="intro" label="补充说明" ></el-table-column>
            <el-table-column prop="front_money" label="交易前金额"></el-table-column>
            <el-table-column prop="money" label="交易实收金额"></el-table-column>
            <el-table-column prop="rear_money" label="交易后金额"></el-table-column>
            <el-table-column prop="pay_type" label="付款方式"></el-table-column>
            <el-table-column prop="OAddTime" label="交易时间" width="120"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 50, 100,]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      statistics: {
        AllRemainingSum: 0, // 会员卡余额
        AllConsume: 0, // 会员消费金额
        AllOfficialReceipts: 0, // 实收金额
        AllDiscounts: 0, // 优惠
        AllTopUp: 0 // 会员充值金额
      },
      seletTime: '', // 选择的时间段
      queryInfo: {
        // eslint-disable-next-line camelcase
        shop_id: '', // 门店id
        // eslint-disable-next-line camelcase
        cashier_id: '', // 收银员id
        type: '', // 卡类型
        // eslint-disable-next-line camelcase
        start_time: '',
        // eslint-disable-next-line camelcase
        end_time: '',
        note: '', // 操作类型
        id: '', // 查询条件
        keyword: ''
      },
      shopOptions: [], // 门店选项
      cashierOptions: [], // 收银员选项
      dateOptions: [ // 时间选项
        {
          value: 1,
          label: '今天'
        }, {
          value: 2,
          label: '昨天'
        }, {
          value: 3,
          label: '本周'
        }, {
          value: 4,
          label: '上周'
        }, {
          value: 5,
          label: '本月'
        }, {
          value: 6,
          label: '上月'
        }, {
          value: 7,
          label: '本季'
        }, {
          value: 8,
          label: '上季'
        }, {
          value: 9,
          label: '今年'
        }
      ],
      operationOptions: [
        {
          label: '充值',
          value: '充值',
          disabled: true
        },
        {
          label: '所有充值',
          value: 1,
          disabled: false
        },
        {
          label: '收银机充值',
          value: 2,
          disabled: false
        },
        {
          label: '微商城充值',
          value: 3,
          disabled: false
        },
        {
          label: '收银机退款充值',
          value: 4,
          disabled: false
        },
        {
          label: '微商城退款充值',
          value: 5,
          disabled: false
        },
        {
          label: '管理员后台充值',
          value: 6,
          disabled: false
        },
        {
          label: '消费',
          value: '消费',
          disabled: true
        },
        {
          label: '所有消费',
          value: 7,
          disabled: false
        },
        {
          label: '收银机消费',
          value: 8,
          disabled: false
        },
        {
          label: '微商城消费',
          value: 9,
          disabled: false
        },
        {
          label: '挂账收款消费',
          value: 10,
          disabled: false
        }
      ],
      TypeOptions: [ // 卡类型选项
        {
          label: '充值',
          value: 1
        },
        {
          label: '消费',
          value: 2
        }
      ],
      resourceOptions: [
        {
          label: '会员卡号',
          value: 1
        },
        {
          label: '会员手机',
          value: 2
        },
        {
          label: '交易单号',
          value: 3
        },
        {
          label: '来源单号',
          value: 4
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              const end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
              const start = new Date(new Date().toLocaleDateString()).getTime()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const start = new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000
              const end = start + 24 * 60 * 60 * 1000 - 1
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本周',
            onClick (picker) {
              const date = new Date()
              const weekday = date.getDay() || 7
              const end = new Date().getTime()
              const start = date.setDate(date.getDate() - weekday + 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '上周',
            onClick (picker) {
              var now = new Date()// 当前日期
              var nowDayOfWeek = now.getDay()// 今天本周的第几天
              var nowDay = now.getDate()// 当前日
              var nowMonth = now.getMonth()// 当前月
              var nowYear = now.getYear()// 当前年
              nowYear += (nowYear < 2000) ? 1900 : 0//
              var start = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 6).getTime()
              const end = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek).getTime() + 24 * 60 * 60 * 1000 - 1
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本月',
            onClick (picker) {
              const end = new Date().getTime()
              const start = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime()
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '上月',
            onClick (picker) {
              var now = new Date()// 当前日期
              var nowYear = now.getYear()// 当前年
              nowYear += (nowYear < 2000) ? 1900 : 0//
              var lastMonthDate = new Date()// 上月日期
              lastMonthDate.setDate(1)
              lastMonthDate.setMonth(lastMonthDate.getMonth() - 1)
              var lastMonth = lastMonthDate.getMonth()
              // 获得某月天数
              var monthStartDate = new Date(nowYear, lastMonth, 1)
              var monthEndDate = new Date(nowYear, lastMonth + 1, 1)
              var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24)
              // ---------------------------------------
              const start = new Date(nowYear, lastMonth, 1).getTime()
              const end = new Date(nowYear, lastMonth, days).getTime() + 24 * 60 * 60 * 1000 - 1
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本季',
            onClick (picker) {
              var now = new Date()// 当前日期
              var nowYear = now.getYear()// 当前年
              nowYear += (nowYear < 2000) ? 1900 : 0//
              var m = now.getMonth() + 1
              const q = parseInt((m + 2) / 3)
              m = q * 3 - 2 // 得到季的首月份
              now.setMonth(m - 1)
              now.setDate(1)
              const start = new Date(nowYear, now.getMonth(), 1).getTime()
              var nextMonthFirstDay = new Date(nowYear, now.getMonth() + 3, 1)
              const end = nextMonthFirstDay.getTime() - 1
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '上季',
            onClick (picker) {
              var now = new Date()// 当前日期
              var nowYear = now.getYear()// 当前年
              nowYear += (nowYear < 2000) ? 1900 : 0//
              var m = now.getMonth() + 1
              const q = parseInt((m + 2) / 3)
              m = q * 3 - 2 // 得到季的首月份
              now.setMonth(m - 1)
              var start, end, nextMonthFirstDay
              if (m - 1 > 2) {
                start = new Date(nowYear, now.getMonth() - 3, 1).getTime()
                nextMonthFirstDay = new Date(nowYear, now.getMonth(), 1)
                end = nextMonthFirstDay.getTime() - 1
              } else {
                start = new Date(nowYear, 10, 1).getTime()
                nextMonthFirstDay = new Date(nowYear, now.getMonth(), 1)
                end = nextMonthFirstDay.getTime() - 1
              }
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '今年',
            onClick (picker) {
              const end = new Date().getTime()
              const start = new Date(new Date().getFullYear(), 0).getTime()
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      cardNum: '', // 会员卡号
      tableData: [], // 交易记录数据
      total: 0
    }
  },
  created () {
    // this.cardNum = this.$route.params.tradeCardNum || sessionStorage.getItem('tradeCardNum')
    this.getCardInfo()
  },
  methods: {
    async getCardInfo () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // eslint-disable-next-line camelcase
      const { data: res } = await this.$http.post('mapi/memberRecordListAll', this.queryInfo)
      console.log(res)
      this.statistics = res.all
      this.shopOptions = res.sort.shop
      this.cashierOptions = res.sort.cashier
      this.TypeOptions = res.sort.type
      this.tableData = res.list.data
      this.total = res.list.total
      this.queryInfo.page = res.list.current_page
      this.queryInfo.pagesize = res.list.per_page
      loading.close()
    },
    onsearch () {
      this.getCardInfo()
    },
    timeChange (val) {
      // console.log(this.seletTime === val)
      if (this.seletTime) {
        // eslint-disable-next-line camelcase
        this.queryInfo.start_time = parseInt(this.seletTime[0])
        // eslint-disable-next-line camelcase
        this.queryInfo.end_time = parseInt(this.seletTime[1])
        this.getCardInfo()
      }
    },
    // 分页 一页显示多少条
    handleSizeChange (newSize) {
      this.queryInfo = {
        // eslint-disable-next-line camelcase
        shop_id: '', // 门店id
        // eslint-disable-next-line camelcase
        cashier_id: '', // 收银员id
        type: '', // 操作类型
        // eslint-disable-next-line camelcase
        start_time: '',
        // eslint-disable-next-line camelcase
        end_time: '',
        resource: '', // 来源
        page: this.queryInfo.page,
        pagesize: newSize
      }
      this.getCardInfo()
    },
    // 分页 跳转到多少页
    handleCurrentChange (newPage) {
      this.queryInfo = {
        // eslint-disable-next-line camelcase
        shop_id: '', // 门店id
        // eslint-disable-next-line camelcase
        cashier_id: '', // 收银员id
        type: '', // 操作类型
        // eslint-disable-next-line camelcase
        start_time: '',
        // eslint-disable-next-line camelcase
        end_time: '',
        resource: '', // 来源,
        page: newPage,
        pagesize: this.queryInfo.pagesize
      }
      this.getCardInfo()
    },
    excelExport () {
      this.$confirm('每次最多导出1万条数据，多余1万条数据导出请联系技术人员协助', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '正在导出，请稍等......',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const _this = this
        this.$http.post('mapi/recordExcel', this.queryInfo)
          .then(function (res) {
          // console.log(res.data.list)
            _this.exportList = res.data.list
            const exportData = res.data.list
            if (exportData.length > 0) {
              require.ensure([], () => {
                const { exportJsonToExcel } = require('../../../vendor/Export2Excel.js')
                const tHeader = ['交易单号', '会员卡号', '会员手机号', '门店', '收银员', '来源单号', '交易类型', '交易说明', '补充说明', '交易前金额', '交易应收金额', '交易后金额', '付款类型', '交易时间']
                const filterVal = ['id', 'card_number', 'phone', 'title', 'manage_user_id', 'order_no', 'type', 'note', 'intro', 'front_money', 'money', 'rear_money', 'pay_type', 'OAddTime']
                const data = _this.formatJson(filterVal, exportData)
                exportJsonToExcel(tHeader, data, '会员卡交易记录' + _this.getNowDate(new Date()))
              })
            } else {
              _this.$message.error('没有符合条件的数据！')
            }
            loading.close()
          })
          .catch(function (error) {
            _this.$message.error(error)
            loading.close()
          })
      }).catch(() => {
        // this.$message.error('取消删除！')
      })
    },
    getNowDate (date) {
      return date.getFullYear() + ((date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)) + (date.getDate() >= 10 ? date.getDate() : '0' + date.getDate())
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style scoped lang="less">
.total_box{
  padding:20px 10px;
  border:1px dashed #e5e5e5;
  border-radius: 10px;
  p {
    line-height: 30px;
    font-size:14px;
    color:#666;
  }
}
.el-select{
  width:120px;
  margin-right: 10px;
  margin-bottom:10px;
}
.el-input{
  width:220px;
  margin-bottom:10px;
  margin-right:10px;
}
.el-date-editor{
  width: 230px;
  margin-right: 10px;
  margin-bottom:10px;
}
.el-pagination{
  text-align: right;
  margin-top:20px;
}
.el-loading-spinner{
  font-size: 30px;
}
</style>
